import { Link } from '@brillout/docpress'
import { ConfigSpec } from '../../components'

<ConfigSpec
  env="client, server"
  cumulative
/>

Hook called as soon as <Link href="/pageContext#data">`pageContext.data`</Link> is available.

```ts
// pages/movies/+onData.ts
// Environment: server, client

export { onData }

import type { PageContext } from 'vike/types'
import type { Data } from './+data'

function onData(pageContext: PageContext & { data: Data }) {
  // Do something with pageContext.data
  console.log(pageContext.data)
}
```

```ts
// pages/movies/+data.ts
// Environment: server

export { data }
export type Data = Awaited<ReturnType<typeof data>>

import type { PageContextServer } from 'vike/types'

async function data(pageContext: PageContextServer) {
  const data = await fetchSomeData()
  return data
}
```

The purpose of `+onData` is that, unlike <Link href="/data">`+data`</Link> which is called only on the server-side, it's also called on the client-side:
 - Upon <Link href="/ssr">SSR</Link> (or <Link href="/pre-rendering">pre-rendering</Link>), `+onData` is called on the server-side right after `+data`.
 - Upon client-side navigation, it is called on the client-side right after `pageContext.data` was received from the server.

You typically use `+onData` when you want to do something with `pageContext.data` on the client-side.

For example, a common use case is to populate <Link href="/store">a store</Link> using `pageContext.data`.

It's <Link href="/config#inheritance">cumulative</Link>, so you can define multiple `+onData`:

```yaml
pages/+onData.ts # Global hook called after every +data
pages/movies/+onData.ts
pages/movies/+data.ts # Both +onData hooks are called after this +data hook
```


## See also

- <Link href="/data" />
- <Link href="/hooks" />
